<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<style type="text/css">
    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .pure-table td,th {
        padding: 0;
        width: 250px;
        text-align: center;
    }

    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }

    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial,sans-serif;
        padding: 1em 0;
        text-align: center;
    }

    .pure-table td,.pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }

    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }

    .pure-table td {
        background-color: transparent;
    }

    .pure-table-bordered td {
        border-bottom: 1px solid #cbcbcb;
    }

    .pure-table-bordered tbody>tr:last-child>td {
        border-bottom-width: 0;
    }
</style>
<body>
<h1 align="center">个人信息</h1>

<div class="col-sm-9" id="addAllCount">

</div>
<form action="/haha" method="get">
    <input type="text" id="idq" name="id" style="display: none">
<!--    <p style="text-align:center"><a th:href="@{/haha}" id="haha">选修课程</a></p>-->
    <p style="text-align:center"><button id="but" type="submit">选修课程</button></p>
</form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script  th:inline="javascript">
    var str = [[${subject}]];
    var std = [[${std}]];

    window.onload = function (){
        document.getElementById("idq").value = [[${id}]];
        var s =                 "    <tr>\n" +
            "        <td>姓名</td>\n" +
            "        <td>"+ std.stdName +"</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>学号</td>\n" +
            "        <td>"+ std.stdId +"</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>年级</td>\n" +
            "        <td>"+ std.stdYear +"</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>专业</td>\n" +
            "        <td>"+ std.stdMajor +"</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "        <td>学院</td>\n" +
            "        <td>"+ std.stdCollege +"</td>\n" +
            "    </tr>\n";
        if(str.length==0) {
            var html = "<table class=\"pure-table pure-table-bordered\" border=\"1\" align=\"center\">\n" + s + "</table>";
            $("#addAllCount").html(html);
            // document.getElementById("#addAllCount").innerHTML = html;
        }else {
            var html = "<table class=\"pure-table pure-table-bordered\" border=\"1\" align=\"center\">\n" + s +
                "        <tr>\n" +
                "            <td>选修课程</td>\n" +
                "            <td>";
            var i = 0;
            for (i=0;i<str.length-1;i++){
                html = html + str[i] + ",";
            }
            html = html + str[i];
            html = html + "</td>\n" +
                "        </tr>"
                "</table>";
            $("#addAllCount").html(html);
        }
    }
</script>

</body>

</html>